<template>
	<view class="content padding-bottom">
		<view class="head flex align-center justify-center">
			<!-- <u-icon name="map margin-left"></u-icon> -->
			<!-- <text>13栋2单元31-06</text> -->
			<view class="recording flex align-center justify-center"><text>缴费记录</text></view>
		</view>

		<view class="add padding-xs "   v-if='isProperty' @click="jump('/pages/user-center/eePayment')"><view class="cuIcon-profile1">物业缴费</view></view>

		<view class="" style="height: 60rpx;"></view>
		<scroll-view scroll-y="true" enable-back-to-top @scrolltolower="loadMore" class="scroll-box">
			<block v-for="(item, index) in payInfo" :key="index">
				<view v-if="item.paymentTime != '' && item.paymentAmount != ''" class="list padding  flex flex-direction justify-between">
					<view class=" flex justify-between">
						<text class="text-bold text-lg">{{ item.paymentTime }}</text>
						<text class="text-df margin-top-xs">已缴费</text>
					</view>
					<view class="flex justify-between flex-direction text">
						<view class="cuIcon-title text-df margin-top-xs margin-right-sm">
							<text>物业费: {{ item.paymentAmount }}元</text>
						</view>
						<view class="cuIcon-title text-df  margin-top-xs margin-right-sm">
							<text>姓名: {{ item.fullName }}</text>
						</view>
						<view class="cuIcon-title text-df margin-top-xs margin-right-sm">
							<text>联系方式: {{ item.contactDetails }}</text>
						</view>
						<view class="cuIcon-title text-df margin-top-xs margin-right-sm">
							<text>地址: {{ item.floor }}栋 - {{ item.unit }}单元 - {{ item.userId }}楼</text>
						</view>
						<view class="cuIcon-title text-df margin-top-xs margin-right-sm">
							<text>时间: {{ item.paymentTime }}</text>
						</view>
					</view>
				</view>
			</block>
			<image
				v-if="!payInfo.length"
				src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/dataIsEmpty.png"
				mode="aspectFill"
				class="emptyIcon "
			></image>
		</scroll-view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
const app = getApp();
export default {
	data() {
		return {
			payInfo: [],
			isProperty:''
		};
	},
	onLoad() {
		var that = this;
		app.globalData.api.getUserPropertyPay().then(res => {
			that.payInfo = res.resultObj;
		});
		this.get();
	},
	methods: {
		async get() {
			app.globalData.api.getUser().then(res => {
				console.log('res: ', res);
				this.isProperty = res.resultObj.identity.isProperty;
				
			});
		},

		jump(url) {
			uni.navigateTo({
				url,
			});
		},
		loadMore() {
			this.$refs.uToast.show({ title: '已到底啦', type: 'success' });
		},
	},
};
</script>

<style lang="scss" scoped>
.content {
	height: 100vh;
	/deep/ .u-sticky {
		// background-color: red !important;
		background-color: #f1f1f1 !important;
	}
	.text {
		view {
			text {
				font-family: PingFang SC;
			}
		}
	}
	.cuIcon-profile1 {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
	}
	.scroll-box {
		width: 100vw;
		height: calc(100vh - 220rpx);
	}
	.head {
		position: relative;
		width: 750rpx;
		height: 160rpx;
		background: #f8ce39;
		border-radius: 0rpx 0rpx 0rpx 1rpx;
		margin: 0 auto;
		text {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
		}
		.recording {
			position: absolute;
			bottom: -45rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 690rpx;
			height: 90rpx;
			background: #ffffff;
			box-shadow: 0rpx 2rpx 15rpx 0rpx rgba(226, 176, 0, 0.26);
			border-radius: 45rpx;
			margin: 0 auto;
			margin-top: -45rpx;
			text {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
			}
		}
	}

	.list {
		width: 690rpx;

		background: #ffffff;
		border-radius: 20rpx;
		margin: 0 auto;
		margin-bottom: 30rpx;
	}
	@keyframes test3 {
		from {
			box-shadow: 0rpx 0rpx 5rpx red;
		}

		to {
			box-shadow: 0rpx 0rpx 30rpx red;
		}
	}

	/deep/.add {
		position: fixed;
		display: flex;
		align-items: center;
		justify-content: center;
		right: 0;
		bottom: 180rpx;
		// width: 80rpx;
		// height: 80rpx;
		background: #f8ce39;
		box-shadow: 0rpx 2rpx 11rpx 0rpx rgba(210, 164, 0, 0.53);
		opacity: 0.8;
		border-radius: 33rpx 0rpx 0rpx 33rpx;
		color: #fffff2;
		font-size: 60rpx;
		animation: test3 2s ease-in-out infinite alternate;
		z-index: 66;
	}
}
</style>
